<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Flickr Image Stack Demo</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>
		
		<script type="text/javascript">
		$(document).ready(function(){
		    $.zoomooz.setup({duration:1000, nativeanimation:true});
		
		    $(document).keypress(function(evt){if(evt.keyCode==13) loadImages(true);});
		    $("#searchtext").blur(function(evt){loadImages(false);});
		    
		    var searchText = getUrlVars()["q"];
            if(searchText) {
                $("#searchtext").val(searchText);
                loadImages(false);
                $("body").zoomTo({targetsize: 1.0});
            }
		});
		
		var previousSearchString = "";
		var notLoaded = true;
		
		// from: http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
		function getUrlVars() {
		    var vars = [];
		    
		    var hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            
            for(var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            
		    return vars;    
        }
        
        function loadImages(forceImages) {
		    var searchString = $("#searchtext").val();
		    if(searchString=="") return;
		    if(!forceImages && searchString==previousSearchString) return;
		    previousSearchString = searchString;
		    
		    if(notLoaded) {
		        notLoaded = false;
		        
		        $(window).click(function (evt) {
				    evt.stopPropagation();
			        $("body").zoomTo({targetsize: 1.0});
				    $("#searchtext").focus();
			    });
			    $("body").zoomTo({targetsize: 1.0});
			    $("#searchtext").focus();
			
			    $("#output").click(function(evt) {
			        evt.stopPropagation();
			        $(this).zoomTo({targetsize: 0.97});
			    });
		    }
		    
			var path = "http://api.flickr.com/services/feeds/photos_public.gne";
			var params = "?tags="+searchString+"&tagmode=any&format=json&jsoncallback=?";
			$("#output").text("");
			$("#output").zoomTo({targetsize: 0.97});
			$.getJSON(path+params, function (data) {
			    $.each(data.items, function (i, item) {
					var elem = $("<img/>");
					var smallimg = item.media.m;
					var fullimg = smallimg.replace("_m", "");
					elem.attr("src", fullimg);
		            var parentElem = $("#output");
		            
					var rot = "rotate(" + (Math.random() * 2 - 1) * 180 + "deg)";
					
					var margin = 20;
		            var width = 10;
		            var left = margin+Math.round(Math.random()*(100-2*margin-width))+"%";
					var top = margin+Math.round(Math.random()*(100-2*margin-width))+"%";
					var cssAttr = {"left":left,"top":top,"width":width+"%","opacity":0.0};
					cssAttr["-webkit-transform"] = rot;
					cssAttr["-o-transform"] = rot;
					cssAttr["-moz-transform"] = rot;
					elem.css(cssAttr);
				
					elem.click(function (evt) {
						evt.stopPropagation();
						$(this).zoomTo({targetsize: 0.7});
						$("img").not(this).css({"z-index":1});
						$(this).css({"z-index":2});
					});
					elem.appendTo("#output").delay(500).animate({opacity:1.0},600);
				});
				
				window.ondragstart = function() { return false };
				window.onselectstart = function() { return false };
			});
		}
		</script>
	</head>
	<body>
	    <div id="container">
	    <label>Flickr search text:</label><input id="searchtext">
		<div id="output"></div>
		<div id="info">Made with <a href="http://janne.aukia.com/zoomooz/">Zoomooz.js</a></div>
		</div>
		
		<!--************************
		**  GOOGLE ANALYTICS      **
		*************************-->
			
			<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16288001-1");
pageTracker._trackPageview();
} catch(err) {}</script>

	</body>
</html>
	